<template>
  <div>
    <el-container class="box">
      <!-- 头部部分 -->
      <el-header height="80px">
        <div class="imgbox">
          <div class="logo">
            <img src="@/assets/img/s5cbfcff8dc0f0.png" alt="" />
          </div>
          <!-- tit -->
          <div>
            <h2>四川华西医院后台系统</h2>
          </div>
        </div>
        <!-- 个人中心 -->
        <div>
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              个人资料<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="a">我的资料</el-dropdown-item>
              <el-dropdown-item command="b">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-container class="containerbox">
        <!-- 侧边栏 -->
        <el-aside width="300px">
          <el-menu
            :router="true"
            :default-active="this.$route.name.toLowerCase()"
            class="el-menu-vertical-demo"
          >
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-s-help"></i>
                <span>统计</span>
              </template>
             <el-menu-item index="statistics">门诊统计</el-menu-item>
              <el-menu-item index="reservation">核算预约</el-menu-item>
               <el-menu-item index="schedulemanagement">进度管理</el-menu-item>
                <!-- <el-menu-item index="1-1">全部订单</el-menu-item> -->
            </el-submenu>
            <!-- <el-menu-item index="2">
              <i class="el-icon-menu"></i>
              <span slot="title">管理</span>
            </el-menu-item>
            <el-submenu index="3">
                <template slot="title">
                <i class="el-icon-document"></i>
              <span slot="title">消息</span>
                </template>
              <el-menu-item index="3-1">医院消息</el-menu-item>
               <el-menu-item index="3-2">科室医生管理</el-menu-item>
            </el-submenu>
            <el-menu-item index="4">
              <i class="el-icon-setting"></i>
              <span slot="title">导航四</span>
            </el-menu-item> -->
          </el-menu>
        </el-aside>
        <!-- 内容主体 -->
        <el-main>
            <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { Message,MessageBox } from "element-ui";
export default {
  methods: {
    handleCommand(command) {
      if (command === "b") {
        MessageBox.confirm("此操作将退出到登录界面, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            localStorage.removeItem('token')
            this.$router.push("/");
            Message.success("退出成功");
          })
          .catch(() => {
            Message.info("取消退出");
          });
      }
    },
  },
   mounted () {
      console.log();;
    },
};
</script>

<style lang="scss" scoped>
.el-main{
  overflow:hidden;
    width: 100vw;
    padding:0px 0px 10px; 
    background-color: #ddd;
}
.box{
    width: 100vw;
    height: 100vh;
}
.el-menu{
  height: 100%; //侧边栏nav
}
.containerbox{
    height: 100vh;
}
.el-aside{
    height: 100%;
    background-color: red;
}
.el-dropdown-link {
  cursor: pointer;
  color: #fff;
}
.el-dropdown {
  margin-right: 50px;
}
.imgbox {
  color: #fff;
  width: 380px;
  display: flex;
  justify-content: space-between;
  background-image: url(../assets/img/dzbsy4-1.jpg);
}
.el-header {
  display: flex;
  padding: 0;
  justify-content: space-between;
  align-items: center;
  background-color: #8e1130;
  .logo {
    width: 100px;
    img {
      width: 100%;
    }
  }
  width: 100vw;
}
</style>